<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			my-component 是自定义组件，通过属性 message 传递了一段文本，
			通过属性 img-src（在组件内部使用时转为 ImgSrc）传递了图片的路径。
			组件的模板中，通过 {{message}} 展示了传递进来的文本，通过 :src='ImgSrc' 绑定了图片路径来展示图片。
		-->
		<div id="app">
			<!-- 使用自定义组件 my-component，并传递 message 和 img-src 属性的值 -->
			<my-component message="今天天气很好" img-src="../img/1.jpg">
			</my-component>
		</div>
		<!-- 定义自定义组件 my-component 的模板 -->
		<template id="temp">
			<div>
				<!-- 显示传递进来的 message 属性的值 -->
				<h3>{{message}}</h3>
				<!-- 根据传递进来的 ImgSrc 属性的值显示图片 -->
				<img :src='ImgSrc' />
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 定义名为 my-component 的 Vue 组件
			Vue.component('my-component', {
				// 声明组件接收 message 和 ImgSrc 两个属性
				props: ["message", "ImgSrc"],
				// 使用定义在模板中的内容
				template: "#temp"
			});
			// 创建一个 Vue 实例，并将其挂载到具有 id 为 'app' 的元素上
			var app = new Vue({
				el: '#app'
			});
		</script>

	</body>
</html>